<template>
  <div ref="loginRef" class="login">
    <div class="login-content">
      <Icon name="login_logo" class="logo" />
      <div class="title">{{ title }}</div>

      <div class="input">
        <div class="input-content">
          <Icon name="nav_person" class="pre-img" />
          <div class="line"></div>
          <input
            v-model="loginForm.user"
            type="text"
            :placeholder="$t('login.code')"
            required
            autocomplete="off"
          />
        </div>
        <div class="input-content">
          <Icon name="password" class="pre-img" />
          <div class="line"></div>
          <input
            v-model="loginForm.password"
            :type="showPassword ? 'text' : 'password'"
            onpaste="return false"
            oncontextmenu="return false"
            oncopy="return false"
            oncut="return false"
            :placeholder="$t('login.pass')"
            required
            autocomplete="off"
          />
          <div>
            <Icon v-if="showPassword" name="show" class="pre-img" />
            <Icon v-else name="hide" class="pre-img" />
          </div>
        </div>
        <div v-show="showTips" class="error-tip">
          <Icon name="status_error" class="icon" />
          <span class="word">{{ tips }}</span>
        </div>
        <CsCheckbox v-model="checked" class="remember">{{ $t('login.remember') }}</CsCheckbox>
      </div>

      <CsButton class="submit-btn" type="normal" :text="$t('login.login')" @click="handleLogin" />
    </div>

    <video
      class="login-bg"
      src="@/assets/video/login_bg.mp4"
      type="video/mp4"
      autoplay="true"
      loop="true"
      muted
    ></video>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const title = ref('');
  const showTips = ref(false);
  const tips = ref('');
  const loginForm = ref({ user: '', password: '', code: '' });
  const loginRef = ref();

  let checked = ref(false);
  let showPassword = ref(false);

  function handleLogin() {
    router.replace('/layout/home');
  }
</script>

<style lang="less" scoped>
  @import '@/styles/reset.less';
  @import '@/styles/mixin.less';

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .clip-border {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 20%);
    background: rgb(173 204 240 / 7%);
    backdrop-filter: blur(20px);
  }

  .login {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;

    &-content {
      display: flex;
      position: absolute;
      z-index: 1;
      right: 141px;
      flex-direction: column;
      align-items: center;
      width: 594px;
      height: 600px;
      animation: fade-in 5s;
      animation-iteration-count: 1;
      background: url('@/assets/images/login/login_background.png') no-repeat center;
      background-size: 594px 600px;

      .logo {
        width: 150px;
        height: 150px;
        margin-top: -57px;
        margin-bottom: 16px;
        border: 1px solid #1afffb;
        border-radius: 50%;
      }

      .title {
        margin-bottom: 37px;
        color: #1afffb;
        font-family: '优设标题黑';
        font-size: 40px;
        text-shadow: 0 4px 2px rgb(0 0 0 / 30%);
      }

      .input {
        display: flex;
        position: relative;
        flex-direction: column;

        &-content {
          display: flex;
          position: relative;
          box-sizing: border-box;
          align-items: center;
          width: 450px;
          height: 50px;
          margin-bottom: 24px;
          padding: 0 8px;
          overflow: hidden;
          border: 1px solid rgb(255 255 255 / 20%);
          background: rgb(173 204 240 / 7%);
          backdrop-filter: blur(20px);

          &:active {
            border: 1px solid rgb(0 194 255 / 100%);
          }

          &:nth-of-type(1) {
            margin-bottom: 30px;
          }

          .pre-img {
            width: 16px;
            height: 16px;
          }

          .line {
            height: 10px;
            margin: 0 12px;
            border-left: 1px solid #fff;
          }

          input {
            flex: 1;
            height: 100%;
            background-color: transparent;
            font-size: 18px;

            &::placeholder {
              height: 36px;
              opacity: 0.8;
              color: #00eaff;
              font-family: 'Source Han Sans CN';
              font-size: 18px;
              font-weight: 300;
              line-height: 36px;
            }
          }
        }

        .error-tip {
          display: flex;
          position: absolute;
          bottom: 10px;
          align-items: center;
          height: 42px;

          .icon {
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }

          .word {
            color: var(--text-color-error);
          }
        }

        .remember {
          margin: 40px 0 64px;
        }
      }

      .submit-btn {
        width: 450px;
        height: 48px;

        :deep(.button) {
          &-text {
            color: #fff;
            font-family: 'Source Han Sans CN';
            font-size: 16px;
            font-weight: bold;
          }
        }

        :deep(.el-icon-loading) {
          color: #010a16;
          font-size: 24px;
        }
      }
    }
  }

  .login-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
</style>
